<template>
  <div class="video-list-page">
    <!-- 平台选择 -->
    <div class="platform-selector-wrapper">
      <transition name="platform-selector">
        <el-radio-group v-model="platform" class="platform-selector">
          <el-radio-button label="kuaishou">快手</el-radio-button>
          <el-radio-button label="douyin">抖音</el-radio-button>
          <el-radio-button label="xiaohongshu">小红书</el-radio-button>
          <el-radio-button label="weibo">微博</el-radio-button>
          <el-radio-button label="baijiahao">百家号</el-radio-button>
          <el-radio-button label="toutiao">头条</el-radio-button>
        </el-radio-group>
      </transition>
    </div>

    <!-- 在视频列表外层添加 -->
    <!-- 修改骨架屏部分 -->
    <el-skeleton :loading="loading" animated class="video-skeleton">
      <template #template>
        <el-row :gutter="20">
          <!-- 使用v-for循环创建4个骨架项 -->
          <el-col v-for="i in 4" :key="i" :xs="24" :sm="12" :md="8" :lg="6">
            <div class="skeleton-item">
              <!-- 视频封面骨架 -->
              <div class="skeleton-cover">
                <el-skeleton-item variant="image" />
                <!-- 模拟时长显示 -->
                <div class="skeleton-duration">
                  <el-skeleton-item variant="text" style="width: 40px" />
                </div>
              </div>

              <!-- 视频信息骨架 -->
              <div class="skeleton-info">
                <!-- 标题骨架 -->
                <el-skeleton-item variant="h3" style="width: 90%; height: 20px" />
                <el-skeleton-item variant="h3" style="width: 60%; height: 20px; margin-top: 8px" />

                <!-- 作者信息骨架 -->
                <div class="skeleton-author">
                  <el-skeleton-item variant="circle" style="width: 32px; height: 32px" />
                  <el-skeleton-item variant="text" style="margin-left: 8px; width: 50%" />
                </div>

                <!-- 统计信息骨架 -->
                <div class="skeleton-stats">
                  <el-skeleton-item variant="text" style="width: 25%" />
                  <el-skeleton-item variant="text" style="width: 25%" />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>

      <!-- 原有的视频列表作为默认插槽内容 -->
      <template #default>
        <!-- 视频列表展示 -->
        <el-row :gutter="20">
          <el-col v-for="video in videoList" :key="video.id" :xs="24" :sm="12" :md="8" :lg="6">
            <el-card class="video-card" shadow="hover" @click="handleVideoClick(video)">
              <!-- 添加操作按钮层 -->
              <div class="card-actions">
                <el-button-group>
                  <el-button type="danger" :icon="Delete" style="position: absolute; bottom: 10px; right: 10px"
                    @click.stop="handleDelete(video)">
                    删除
                  </el-button>
                </el-button-group>
              </div>
              <div class="video-cover">
                <el-image :src="video.cover_url" fit="cover" loading="lazy">
                  <template #placeholder>
                    <div class="image-placeholder">
                      <el-icon>
                        <Picture />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
                <!-- <span class="duration">{{ video.duration }}</span> -->
                <div class="play-icon">
                  <el-icon>
                    <VideoPlay />
                  </el-icon>
                </div>
              </div>

              <div class="video-info">
                <h3 class="title">{{ video.title }}</h3>
                <div class="author">
                  <el-avatar :size="24" :src="video.author?.avatar" />
                  <span class="name">{{ video.author?.name }}</span>
                </div>
                <div class="stats">
                  <span class="views">
                    <el-icon>
                      <View />
                    </el-icon>
                    {{ formatNumber(video.stats?.views) }}播放
                  </span>
                  <span class="likes">
                    <el-icon>
                      <Star />
                    </el-icon>
                    {{ formatNumber(video.stats?.likes) }}点赞
                  </span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </el-skeleton>
    <!-- 评论弹窗 -->
    <el-dialog v-model="commentDialogVisible" title="评论" width="600px" :before-close="closeCommentDialog">
      <div v-if="commentLoading" class="comment-loading">
        <el-skeleton :count="5" item-width="100%" :loading="commentLoading" animated>
          <template #template>
            <div class="comment-skeleton-item">
              <div class="skeleton-avatar"></div>
              <div class="skeleton-content">
                <div class="skeleton-line"></div>
                <div class="skeleton-line"></div>
                <div class="skeleton-line-half"></div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>

      <div v-else-if="comments.length > 0" class="comment-list">
        <div v-for="comment in comments" :key="comment.id" class="comment-item">
          <img :src="comment.avatar" alt="用户头像" class="comment-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-username">{{ comment.username }}</span>
              <span class="comment-time">{{ comment.time }}</span>
            </div>
            <div class="comment-text">{{ comment.content }}</div>
            <div class="comment-actions">
              <span class="action-item" @click="likeComment(comment)">
                <svg-icon icon-class="like" :class="{ 'liked': comment.isLiked }" />{{ comment.likeCount }}
              </span>
              <span class="action-item">
                <svg-icon icon-class="reply" />回复 ({{ comment.replyCount }})
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="no-comments">
        暂无评论
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeCommentDialog">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 视频播放弹窗 -->
    <el-dialog v-model="dialogVisible" :title="currentVideo?.title" class="video-dialog" width="60%" destroy-on-close
      @closed="handleDialogClose">
      <div class="video-player-container">
        <div v-if="loading" class="loading-overlay">
          <el-icon class="is-loading">
            <Loading />
          </el-icon>
        </div>

        <iframe v-if="platform === 'kuaishou' && currentVideo" :src="getKuaishouUrl(currentVideo)" class="video-iframe"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowfullscreen @load="handleVideoLoad" @error="handleVideoError"></iframe>

        <!-- 抖音播放器 -->
        <iframe :src="getDouyinUrl(currentVideo)" scrolling="no" border="0" frameborder="no" framespacing="0"
          allowfullscreen="true" class="video-iframe" @load="handleVideoLoad" @error="handleVideoError"
          sandbox="allow-scripts allow-same-origin allow-presentation"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>

        <!-- 小红书播放器 -->
        <iframe v-if="platform === 'xiaohongshu' && currentVideo" :src="getXiaohongshuUrl(currentVideo)"
          class="video-iframe" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowfullscreen @load="handleVideoLoad" @error="handleVideoError"></iframe>

        <!-- 微博播放器 -->
        <iframe v-if="platform === 'weibo' && currentVideo" :src="getWeiboUrl(currentVideo)" class="video-iframe"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowfullscreen @load="handleVideoLoad" @error="handleVideoError"></iframe>

        <!-- 头条播放器 -->
        <iframe v-if="platform === 'toutiao' && currentVideo" :src="getToutiaoUrl(currentVideo)"
          class="video-iframe toutiao-player" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowfullscreen @load="handleVideoLoad" @error="handleVideoError"></iframe>

        <!-- 百家号播放器 -->
        <iframe v-if="platform === 'baijiahao' && currentVideo" :src="getBaijiahaoUrl(currentVideo)"
          class="video-iframe" frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowfullscreen @load="handleVideoLoad" @error="handleVideoError"></iframe>
      </div>

      <div class="video-detail" v-if="currentVideo">
        <div class="author-info">
          <el-avatar :size="40" :src="currentVideo.author?.avatar" />
          <div class="author-detail">
            <span class="name">{{ currentVideo.author?.name }}</span>
            <span class="time">{{ currentVideo.publishTime }}</span>
          </div>
          <el-button type="primary" size="small" class="follow-btn" :icon="Plus" @click="handleFollow">
            关注
          </el-button>
        </div>

        <!-- <div class="video-stats">
          <div class="stat-item">
            <el-icon>
              <View />
            </el-icon>
            <span>{{ currentVideo.stats?.views }}</span>
          </div>
          <div class="stat-item">
            <el-icon>
              <Star />
            </el-icon>
            <span>{{ currentVideo.stats?.likes }}</span>
          </div>
        </div> -->
        <!-- 视频统计信息 -->
        <div class="video-stats">
          <div class="stat-item">
            <svg-icon icon-class="play" class="icon" />{{ currentVideo.playCount || currentVideo.stats?.views || 0 }}
          </div>
          <div class="stat-item">
            <svg-icon icon-class="like" class="icon" />{{ currentVideo.likeCount || currentVideo.stats?.likes || 0 }}
          </div>
          <div class="stat-item" @click="openCommentDialog(currentVideo)">
            <svg-icon icon-class="comment" class="icon" />5
          </div>
          <div class="stat-item">
            <svg-icon icon-class="share" class="icon" />{{ currentVideo.shareCount || currentVideo.stats?.shares || 0 }}
          </div>
        </div>

        <!-- 视频标签 -->
        <div class="video-tags" v-if="currentVideo.tags?.length">
          <el-tag v-for="tag in currentVideo.tags" :key="tag" size="small" class="tag-item">
            # {{ tag }}
          </el-tag>
        </div>

        <!-- 视频描述 -->
        <div class="description">
          {{ currentVideo.description }}
        </div>

        <!-- 音乐信息 -->
        <div class="music-info" v-if="currentVideo.music">
          <el-icon>
            <Headset />
          </el-icon>
          <span class="music-name">{{ currentVideo.music.name }}</span>
          <span class="music-author">- {{ currentVideo.music.author }}</span>
        </div>

        <!-- 位置信息 -->
        <div class="location" v-if="currentVideo.location">
          <el-icon>
            <Location />
          </el-icon>
          <span>{{ currentVideo.location }}</span>
        </div>

        <div class="description">{{ currentVideo.description }}</div>
        <div class="dialog-actions">
          <el-button type="danger" class="close-btn" @click="close">
            <el-icon>
              <Close />
            </el-icon>
            关闭
          </el-button>
          <el-button type="primary" @click="handleDownload" :loading="downloading">
            <el-icon>
              <Download />
            </el-icon>
            下载视频
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/api/request'

// 添加随机数据生成函数
// 生成随机头像 (使用随机用户头像服务)
const generateRandomAvatar = () => {
  // 使用 picsum.photos 提供的随机头像服务
  return `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1000)}`
}

// 生成随机浏览量 (100-10000之间)
const generateRandomViews = () => {
  return Math.floor(Math.random() * 9901) + 100
}

// 生成随机点赞量 (10-1000之间)
const generateRandomLikes = () => {
  return Math.floor(Math.random() * 991) + 10
}
import { mockDouyinData } from '../../../components/user/douyinData'
import { VideoPlay } from '@element-plus/icons-vue'
import { mockXiaohongshuData } from '../../../components/user/xiaohongshuData'
import { mockWeiboData } from '../../acl/user/weiboData'
import { mockToutiaoData } from '../../acl/user/toutiaoData'
import { mockBaijiahaoData } from '../../acl/user/baijiahaoData'
import {
  View,
  Star,
  ChatDotRound,
  Share,
  Headset,
  Location,
  Plus,
} from '@element-plus/icons-vue'
const router = useRouter()
const platform = ref('kuaishou')
const videoList = ref([])
const currentVideo = ref(null)
const dialogVisible = ref(false)
const loading = ref(true)
const commentDialogVisible = ref(false);
const comments = ref([]);
const commentLoading = ref(false);
// 修改loading状态控制
const loadingTimer = ref(null)

// 添加播放器相关的响应式数据
// 快手
const videoPlayer = ref(null)
const playerOptions = ref({
  autoplay: true,
  controls: true,
  sources: [
    {
      type: 'video/mp4',
      src: '',
    },
  ],
})

// 获取播放链接
// const getBilibiliUrl = (video) => {
//   return `//player.bilibili.com/player.html?aid=${video.aid}&bvid=${video.id}&cid=${video.cid}&page=1`
// }

// 抖音数组
const douyinData = ref([])
// // 修改getDouyinUrl函数
const getDouyinUrl = (video) => {
  // 使用抖音官方提供的嵌入播放器域名
  return mockDouyinData.getVideoUrl(video)
}
const currentVideoUrl = computed(() => {
  if (!currentVideo.value) return ''
  return currentVideo.value.videoUrl // 直接使用视频URL
})
// 快手
// const getKuaishouUrl = (video) => {
//   return mockKuaishouData.getVideoUrl(video)
// }

const getKuaishouUrl = (video) => {
  if (!video || !video.videoUrl) {
    console.error('无效的快手视频数据或URL:', video);
    return '';
  }

  // 确保URL包含协议
  let url = video.videoUrl;
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    url = 'https:' + url; // 假设快手使用https协议
  }

  // 添加必要的播放参数
  return url + (url.includes('?') ? '&' : '?') + 'autoplay=1';
}
// 添加关注方法
const handleFollow = () => {
  ElMessage.success('关注成功')
}

// 修改视频数据映射
const mapVideoData = (item) => ({
  id: item.aweme_id || item.id || '',
  title: item.video_desc || item.title || '无标题',
  // 添加对多种可能封面字段的支持
  cover_url: (
    // 调试日志：打印item对象以查看所有字段
    console.log('视频数据项:', item),
    // 尝试多种可能的封面字段名称
    // 保留快手和抖音的封面处理逻辑
    (platform.value === 'kuaishou' || platform.value === 'douyin') ? (
      item.cover_url ||
      item.cover_image_url ||
      item.cover ||
      item.image_url ||
      item.pic_url ||
      ''
    ) : (
      // 其他平台使用网络图片作为封面
      `https://picsum.photos/300/200?random=${Math.floor(Math.random() * 1000)}&text=${encodeURIComponent(item.title || '视频封面')}`
    )
  ),
  duration: formatDuration(item.duration || 0),
  author: {
    avatar: generateRandomAvatar(),
    name: item.author_nickname || item.user_name || '未知作者',
  },
  stats: {
    commentCount: 5,
    views: generateRandomViews(),
    likes: generateRandomLikes(),
    comments: item.comment_count || 0,
    shares: item.share_count || 0,
  },
  // 尝试多种可能的URL字段
  videoUrl: item.video_url || item.play_url || item.url || item.video_path || '',
  publishTime: item.create_time || Date.now(),
  description: item.video_desc || item.desc || '',
  tags: item.hashtag_list?.map((tag) => tag.hashtag_name) || [],
  music: item.music_info
    ? {
      name: item.music_info.title,
      author: item.music_info.author,
    }
    : null,
  location: item.poi_info?.poi_name || ''
})
// 添加获取小红书播放链接的方法
const getXiaohongshuUrl = (video) => {
  // 使用小红书的嵌入式播放器URL
  return mockXiaohongshuData.getVideoUrl(video)
}
// 添加获取微博视频URL的方法
const getWeiboUrl = (video) => {
  return mockWeiboData.getVideoUrl(video)
}

// 添加获取头条视频URL的方法
const getToutiaoUrl = (video) => {
  return mockToutiaoData.getVideoUrl(video)
}
// 添加获取百家号视频URL的方法
const getBaijiahaoUrl = (video) => {
  return mockBaijiahaoData.getVideoUrl(video)
}
// 假设这是加载视频数据的地方
function loadVideoData(videoId) {
  // 模拟API请求
  setTimeout(() => {
    // 模拟视频数据
    const videoData = {
      id: videoId,
      title: '示例视频',
      // ...其他视频属性...
      // 确保设置评论数量
      commentCount: 8, // 直接设置评论数字段
      stats: {
        comments: 8, // 或者在stats对象中设置
        // ...其他统计数据...
      }
      // ...
    };

    // 设置视频数据
    currentVideo.value = videoData;
    // 调试信息
    console.log('加载的视频数据:', videoData);
  }, 500);
}

// 添加格式化函数
const formatDuration = (duration) => {
  // 将毫秒转换为秒
  const seconds = Math.floor(duration / 1000)
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
}

const formatNumber = (num) => {
  // 添加对undefined或null的处理
  if (num === undefined || num === null) {
    return '0'
  }
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  }
  return num.toString()
}

const formatTime = (timestamp) => {
  return new Date(timestamp * 1000).toLocaleDateString()
}

// 修改获取抖音数据的方法
const getDouyinData = async () => {
  try {
    const response = await request.get('/douyin/videos')
    douyinData.value = response.data.list
    console.log(douyinData.value, 'douyinData.value')
  } catch (error) {
    console.error('获取抖音视频失败:', error)
    ElMessage.error('获取抖音视频失败')
  }
}

// 加载视频列表
const loadVideoList = async () => {
  try {
    loading.value = true
    // 设置最短loading时间为1.5秒
    loadingTimer.value = setTimeout(() => {
      loading.value = false;
    }, 2500);
    switch (platform.value) {
      case 'kuaishou':
        // 修改为从API获取数据，并添加详细错误处理
        try {
          console.log('请求快手API: /api/kuaishouhao/videos')
          const startTime = performance.now()
          const response = await request.get('/kuaishouhao/videos', {
            // 添加请求超时设置
            timeout: 10000,
            // 记录请求头
            headers: {
              'X-Request-Time': new Date().toISOString(),
              'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
            },
            // 添加分页参数
            params: {
              page: 1,
              limit: 10
            }
          })
          const endTime = performance.now()
          console.log(`快手API响应耗时: ${(endTime - startTime).toFixed(2)}ms`)
          console.log('快手API响应状态:', response.status)
          console.log('快手API响应头:', response.headers)
          console.log('快手API响应数据:', response.data)

          // 检查响应数据结构
          if (response.data && response.data.data) {
            // 从data字段中获取list数组
            if (Array.isArray(response.data.data.list)) {
              // 使用mapVideoData函数处理视频数据
              videoList.value = response.data.data.list.map(item => mapVideoData(item));
              ElMessage.success(`成功获取${response.data.data.list.length}条快手视频数据`);
            } else {
              videoList.value = []
              console.warn('快手API返回的数据格式不符合预期')
              ElMessage.warning('数据格式异常，请联系管理员')
            }
          } else {
            videoList.value = []
            console.warn('快手API返回数据为空')
            ElMessage.warning('数据为空，请联系管理员')
          }
        } catch (error) {
          console.error('获取快手视频失败:', error)
          // 显示更详细的错误信息
          if (error.response) {
            // 服务器返回了错误响应
            ElMessage.error(`获取快手视频失败: ${error.response.status} ${error.response.statusText}`)
            console.error('响应状态:', error.response.status)
            console.error('响应头:', error.response.headers)
            console.error('响应数据:', error.response.data)
          } else if (error.request) {
            // 请求已发送但未收到响应
            ElMessage.error('获取快手视频失败: 服务器无响应')
            console.error('请求详情:', error.request)
          } else {
            // 设置请求时发生错误
            ElMessage.error(`获取快手视频失败: ${error.message}`)
          }
          videoList.value = []
        }
        break
      case 'douyin':
        // 使用API获取抖音数据
        try {
          console.log('请求抖音API: /douyin/videos')
          const startTime = performance.now()
          const response = await request.get('/douyin/videos', {
            timeout: 30000,
            headers: {
              'X-Request-Time': new Date().toISOString(),
              'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
            },
            params: {
              page: 1,
              limit: 10
            }
          })
          const endTime = performance.now()
          console.log(`抖音API响应耗时: ${(endTime - startTime).toFixed(2)}ms`)
          console.log('抖音API响应数据:', response.data)

          if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
            videoList.value = response.data.data.list.map(item => mapVideoData(item))
            ElMessage.success(`成功获取${response.data.data.list.length}条抖音视频数据`)
          } else {
            videoList.value = []
            ElMessage.warning('数据格式异常或为空')
          }
        } catch (error) {
          console.error('获取抖音视频失败:', error)
          ElMessage.error(`获取抖音视频失败: ${error.message || '未知错误'}`)
          videoList.value = []
        }
        break
      case 'xiaohongshu':
        // 使用API获取小红书数据
        try {
          console.log('请求小红书API: /xiaohongshu/videos')
          const startTime = performance.now()
          const response = await request.get('/xiaohongshu/videos', {
            timeout: 30000,
            headers: {
              'X-Request-Time': new Date().toISOString(),
              'X-Request-Id': 'req-' + Math.random().toString(36).substring(2, 15)
            },
            params: {
              page: 1,
              limit: 10
            }
          })
          const endTime = performance.now()
          console.log(`小红书API响应耗时: ${(endTime - startTime).toFixed(2)}ms`)
          console.log('小红书API响应数据:', response.data)

          if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
            // 直接映射数据，不需要额外添加platform字段
            videoList.value = response.data.data.list.map(item => mapVideoData(item))
            ElMessage.success(`成功获取${response.data.data.list.length}条小红书视频数据`)
            localStorage.setItem(`videoList_${platform.value}`, JSON.stringify(videoList.value))
          } else {
            videoList.value = []
            ElMessage.warning('数据格式异常或为空')
          }
        } catch (error) {
          console.error('获取小红书视频失败:', error)
          ElMessage.error(`获取小红书视频失败: ${error.message || '未知错误'}`)
          videoList.value = []
        }
        break
      case 'weibo':
        const { list: wbList } = await mockWeiboData.getVideoList()
        videoList.value = wbList.map(item => mapVideoData(item))  // 添加mapVideoData处理
        // 加载成功后缓存数据
        localStorage.setItem(`videoList_${platform.value}`, JSON.stringify(videoList.value))
        break
      case 'toutiao':
        const { list: ttList } = await mockToutiaoData.getVideoList()
        videoList.value = ttList.map(item => mapVideoData(item))  // 添加mapVideoData处理
        // 加载成功后缓存数据
        localStorage.setItem(`videoList_${platform.value}`, JSON.stringify(videoList.value))
        break
      case 'baijiahao':
        // 新增百家号数据加载
        const { list: bjhList } = await mockBaijiahaoData.getVideoList()
        videoList.value = bjhList.map(item => mapVideoData(item))  // 添加mapVideoData处理
        // 加载成功后缓存数据
        localStorage.setItem(`videoList_${platform.value}`, JSON.stringify(videoList.value))
        break
    }
  } catch (error) {
    console.error('加载视频列表失败:', error)
    ElMessage.error('加载视频列表失败')
  } finally {
    loading.value = false
  }
}

// 处理视频点击
const handleVideoClick = (video) => {
  if (!video) {
    ElMessage.error('无效的视频数据');
    return;
  }

  if (!video.videoUrl) {
    ElMessage.error('视频URL无效，无法播放');
    console.error('视频URL无效:', video);
    return;
  }

  // 验证URL格式
  try {
    new URL(video.videoUrl);
  } catch (e) {
    ElMessage.error('视频URL格式无效');
    console.error('视频URL格式无效:', video.videoUrl);
    return;
  }

  currentVideo.value = video;
  dialogVisible.value = true;

  // 日志记录，便于调试
  console.log('播放视频:', video.title, 'URL:', video.videoUrl);
}

const handleVideoLoad = () => {
  loading.value = false
}

const handleVideoError = () => {
  loading.value = false
  ElMessage.error('视频加载失败，请稍后重试')
}
// 添加小红书播放器初始化方法
const initXiaohongshuPlayer = () => {
  const iframe = document.querySelector('.video-iframe')
  if (iframe && platform.value === 'xiaohongshu') {
    // 向iframe发送初始化消息
    iframe.contentWindow.postMessage(
      {
        type: 'xhs-player-init',
        videoId: currentVideo.value.id,
      },
      '*',
    )
  }
}

const handleDialogClose = () => {
  // 不直接清除currentVideo，只隐藏弹窗
  dialogVisible.value = false
  // 关闭弹窗后重新加载视频列表
  loadVideoList()
}

const downloading = ref(false)
const close = () => {
  dialogVisible.value = false
  // 保存当前视频到本地存储
  if (currentVideo.value) {
    localStorage.setItem('lastPlayedVideo', JSON.stringify(currentVideo.value));
  }
}

const handleDownload = async () => {
  if (!currentVideo.value) return
  downloading.value = true
  // 这里添加实际的下载逻辑，例如：
  // await downloadVideo(currentVideo.value.id)
  ElMessage.success('下载成功')
}

watch(platform, (newPlatform, oldPlatform) => {
  // 保存当前视频到本地存储
  if (currentVideo.value) {
    localStorage.setItem('lastPlayedVideo', JSON.stringify(currentVideo.value));
  }

  // 显示加载状态
  loading.value = true

  // 延迟加载视频列表，避免频繁切换平台导致的性能问题
  setTimeout(() => {
    loadVideoList()
  }, 300)

  // 只有当平台变化且弹窗可见时，才隐藏弹窗
  if (dialogVisible.value) {
    dialogVisible.value = false
  }
})

onMounted(() => {
  // 暂时注释掉抖音数据获取
  // getDouyinData()
  loadVideoList()
})

const initDouyinPlayer = () => {
  if (platform.value === 'douyin' && currentVideo.value) {
    const container = document.getElementById('douyin-player-container')
    if (container) {
      container.innerHTML = ''

      // 创建抖音播放器脚本
      const script = document.createElement('script')
      // 使用正确的抖音播放器SDK URL
      script.src =
        'https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_8926.f87f89c4.js'
      script.async = true
      script.onload = () => {
        // 确保DouyinPlayer对象存在
        if (window.DouyinPlayer) {
          window.DouyinPlayer({
            container: container,
            vid: currentVideo.value.id,
            autoplay: true,
            width: '100%',
            height: '100%',
          })
        }
        handleVideoLoad()
      }
      script.onerror = handleVideoError
      document.body.appendChild(script)
    }
  }
}

// 监听当前视频变化
watch(currentVideo, (newVal) => {
  if (newVal && platform.value === 'douyin') {
    nextTick(() => {
      initDouyinPlayer()
    })
  }
})
// 生成模拟评论数据
function generateMockComments(count) {
  // 确保至少生成5条评论
  count = Math.max(count || 0, 5);

  const mockComments = [];
  const usernames = [
    '用户1', '用户2', '用户3', '用户4', '用户5',
    '视频爱好者', '评论达人', '路人甲', '旁观者', '热心网友',
    '数码控', '美食家', '旅行达人', '摄影爱好者', '音乐迷'
  ];
  const commentsContent = [
    '这个视频真不错！',
    '学习了，感谢分享！',
    '很精彩的内容，支持一下！',
    '这个角度很独特，值得深思',
    '期待更多这样的作品',
    '画面清晰，内容丰富',
    '太棒了，已经三连了',
    '很有创意的视频',
    '内容很实用，谢谢',
    '这个视频很有深度',
    '制作精良，值得推荐',
    '观点独特，受益匪浅',
    '看完很有启发，感谢分享',
    '内容充实，讲解清晰',
    '画面太美了，每一帧都是壁纸',
    '配乐很好听，和内容很配',
    '干货满满，收获良多',
    '太精彩了，一口气看完',
    '很有意思的视频，支持原创',
    '希望能出更多类似的内容'
  ];

  for (let i = 0; i < count; i++) {
    const randomUsername = usernames[Math.floor(Math.random() * usernames.length)];
    // 使用网络随机头像
    const randomAvatar = `https://picsum.photos/40/40?random=${i}`;
    const randomContent = commentsContent[Math.floor(Math.random() * commentsContent.length)];
    const randomLikeCount = Math.floor(Math.random() * 100);
    const randomReplyCount = Math.floor(Math.random() * 10);
    const randomTime = Math.floor(Math.random() * 24) + '小时前';

    mockComments.push({
      id: i + 1,
      username: randomUsername,
      avatar: randomAvatar,
      content: randomContent,
      likeCount: randomLikeCount,
      replyCount: randomReplyCount,
      time: randomTime,
      isLiked: false
    });
  }

  return mockComments;
}

// 打开评论弹窗
function openCommentDialog(video) {
  if (!video) {
    ElMessage.warning('无法获取视频数据');
    return;
  }

  // 确保video对象被正确保存
  currentVideo.value = video;
  commentDialogVisible.value = true;
  commentLoading.value = true;

  // 获取评论数量
  const commentCount = video.commentCount || video.stats?.comments || 5;
  console.log('评论数量:', commentCount);

  // 模拟加载评论数据
  setTimeout(() => {
    comments.value = generateMockComments(commentCount);
    commentLoading.value = false;
    console.log('生成的评论数据:', comments.value);
  }, 500);
}

// 关闭评论弹窗
function closeCommentDialog() {
  commentDialogVisible.value = false;
  // 只清空评论数据，不要清空视频数据
  comments.value = [];
  // 不要设置currentVideo.value = null;  
}

// 评论点赞功能
function likeComment(comment) {
  comment.isLiked = !comment.isLiked;
  comment.likeCount = comment.isLiked ? comment.likeCount + 1 : comment.likeCount - 1;
}

// 添加一个专门用于恢复视频数据的方法
const restoreVideoData = () => {
  const lastVideo = localStorage.getItem('lastPlayedVideo');
  if (lastVideo) {
    const videoData = JSON.parse(lastVideo);
    currentVideo.value = videoData;
    // 确保平台正确设置
    platform.value = 'kuaishou'; // 假设上次播放的是快手视频
    return true;
  }
  return false;
}

// 在需要的地方调用恢复方法，例如在打开弹窗时
const openVideoDialog = () => {
  if (!currentVideo.value) {
    // 如果没有当前视频，尝试从本地存储恢复
    restoreVideoData();
  }
  dialogVisible.value = true;
}

// 组件卸载时清理定时器
onBeforeUnmount(() => {
  if (loadingTimer.value) {
    clearTimeout(loadingTimer.value)
  }
})
</script>

<style lang="scss" scoped>
// 核心科技风格变量
$neon-blue: #64ffda;
$neon-purple: #9d4edd;
$neon-pink: #f72585;
$glow-blue: 0 0 15px #64ffda, 0 0 30px #64ffda, 0 0 50px rgba(100, 255, 218, 0.8);
$glow-purple: 0 0 10px #9d4edd, 0 0 20px #9d4edd, 0 0 30px rgba(157, 78, 221, 0.6);
$glow-pink: 0 0 10px #f72585, 0 0 20px #f72585, 0 0 30px rgba(247, 37, 133, 0.6);
$grid-bg: linear-gradient(rgba(100, 255, 218, 0.1) 1px, transparent 1px),
  linear-gradient(90deg, rgba(100, 255, 218, 0.1) 1px, transparent 1px);
$tech-font: 'Orbitron', 'Rajdhani', 'Consolas', monospace;

.video-list-page {
  margin-right: 50px;
  padding: 20px;
  min-height: 100vh;
  background:
    linear-gradient(45deg, #000b1a 0%, #0a192f 30%, #1b0f2e 60%, #2c0b30 100%),
    repeating-linear-gradient(90deg,
      transparent 0%,
      rgba(64, 255, 218, 0.1) 20%,
      transparent 40%,
      rgba(247, 37, 133, 0.1) 60%,
      transparent 80%);
  position: relative;
  z-index: 0;
  color: #e6f1ff;
  font-family: $tech-font;

  // 网格背景
  &:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: $grid-bg;
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
  }

  // 粒子效果
  &:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      radial-gradient(circle, rgba(100, 255, 218, 0.1) 1px, transparent 1px),
      radial-gradient(circle, rgba(157, 78, 221, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    pointer-events: none;
    z-index: -1;
    animation: float 30s linear infinite;
  }

  // 平台选择器
  .platform-selector-wrapper {
    margin-bottom: 30px;
  }

  .platform-selector {
    margin-bottom: 24px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    background: rgba(10, 25, 47, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(100, 255, 218, 0.3);
    box-shadow: 0 0 30px rgba(100, 255, 218, 0.1);

    :deep(.el-radio-button) {
      margin: 0;

      &:first-child .el-radio-button__inner {
        border-radius: 6px 0 0 6px;
      }

      &:last-child .el-radio-button__inner {
        border-radius: 0 6px 6px 0;
      }
    }

    :deep(.el-radio-button__inner) {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
      background: rgba(10, 25, 47, 0.5);
      border-color: rgba(100, 255, 218, 0.3);
      color: #8892b0;

      &:hover {
        color: $neon-blue;
        border-color: $neon-blue;
        background: rgba(10, 25, 47, 0.8);
      }

      &::before {
        font-family: 'element-icons';
        font-size: 16px;
      }
    }

    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background: rgba(100, 255, 218, 0.1);
      border-color: $neon-blue;
      color: $neon-blue;
      box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
      animation: glitch 8s infinite;

      // 平台特色颜色
      &[value='kuaishou'] {
        box-shadow: 0 0 15px rgba(255, 102, 0, 0.5);
        border-color: #ff6600;
        color: #ff6600;
        background: rgba(255, 102, 0, 0.1);
      }

      &[value='douyin'] {
        box-shadow: 0 0 15px rgba(254, 44, 85, 0.5);
        border-color: #fe2c55;
        color: #fe2c55;
        background: rgba(254, 44, 85, 0.1);
      }

      &[value='xiaohongshu'] {
        box-shadow: 0 0 15px rgba(255, 36, 66, 0.5);
        border-color: #ff2442;
        color: #ff2442;
        background: rgba(255, 36, 66, 0.1);
      }
    }
  }

  // 视频卡片
  .video-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(100, 255, 218, 0.3);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.6) 0%, rgba(10, 35, 68, 0.6) 100%);
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    // 发光边框效果
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 12px;
      background: linear-gradient(45deg, $neon-blue, $neon-purple) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.4;
      z-index: -1;
      animation: border-flow 6s linear infinite;
    }

    &:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 255, 218, 0.2);
    }

    .card-actions {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 25, 47, 0.8);
      backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 2;

      .el-button {
        border: 1px solid $neon-pink;
        background: rgba(247, 37, 133, 0.1);
        color: $neon-pink;
        box-shadow: $glow-pink;

        &:hover {
          background: rgba(247, 37, 133, 0.2);
          transform: scale(1.1);
        }
      }
    }

    &:hover .card-actions {
      opacity: 1;
    }

    .video-cover {
      position: relative;
      aspect-ratio: 16/9;
      overflow: hidden;
      border-radius: 8px 8px 0 0;

      .el-image {
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease;
      }

      &:hover .el-image {
        transform: scale(1.05);
      }

      .duration {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(10, 25, 47, 0.8);
        color: $neon-blue;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        border: 1px solid rgba(100, 255, 218, 0.3);
      }

      .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        color: $neon-blue;
        text-shadow: $glow-blue;
        opacity: 0;
        transition: all 0.3s;
        filter: drop-shadow(0 0 8px rgba(100, 255, 218, 0.8));
      }

      &:hover .play-icon {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
      }
    }

    .video-info {
      padding: 12px;

      .title {
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 1.4;
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #e6f1ff;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
      }

      .author {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .name {
          font-size: 13px;
          color: #8892b0;
        }
      }

      .stats {
        display: flex;
        gap: 16px;
        color: #8892b0;
        font-size: 13px;

        span {
          display: flex;
          align-items: center;
          gap: 4px;

          .el-icon {
            color: $neon-purple;
          }
        }
      }
    }
  }

  // 骨架屏
  .video-skeleton {
    .skeleton-item {
      background: linear-gradient(135deg, rgba(10, 25, 47, 0.6) 0%, rgba(10, 35, 68, 0.6) 100%);
      border: 1px solid rgba(100, 255, 218, 0.3);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 20px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

      .skeleton-cover {
        position: relative;
        aspect-ratio: 16/9;
        background: rgba(10, 25, 47, 0.8);

        .skeleton-duration {
          position: absolute;
          bottom: 8px;
          right: 8px;
        }
      }

      .skeleton-info {
        padding: 12px;
        background: transparent;

        .skeleton-author {
          display: flex;
          align-items: center;
          margin: 12px 0;
        }
      }
    }
  }

  // 视频弹窗
  .video-dialog {
    :deep(.el-dialog) {
      max-width: 1200px;
      margin: 20px auto;
      border: 2px dashed $neon-blue;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(10, 35, 68, 0.9) 100%);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 80px rgba(100, 255, 218, 0.2), inset 0 0 40px rgba(100, 255, 218, 0.05);
      color: #e6f1ff;

      // 发光边框
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        background: linear-gradient(45deg, $neon-blue, $neon-purple, $neon-pink) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.6;
        z-index: -1;
        animation: border-flow 6s linear infinite;
      }

      .el-dialog__header {
        border-bottom: 1px solid rgba(100, 255, 218, 0.2);
        padding: 15px 20px;
        background: rgba(10, 25, 47, 0.5);

        .el-dialog__title {
          color: $neon-blue;
          text-shadow: $glow-blue;
          font-weight: 500;
        }

        .el-dialog__headerbtn .el-icon {
          color: #8892b0;
          transition: all 0.3s;

          &:hover {
            color: $neon-blue;
            text-shadow: $glow-blue;
          }
        }
      }

      .el-dialog__body {
        padding: 20px;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
      }
    }

    .video-player-container {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      background: #0a192f;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(100, 255, 218, 0.3);

      .video-element,
      .video-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 25, 47, 0.8);
        z-index: 2;

        .el-icon {
          font-size: 48px;
          color: $neon-blue;
          text-shadow: $glow-blue;
          animation: rotate 2s linear infinite;
        }
      }
    }

    .video-detail {
      margin-top: 20px;
      padding: 0 20px;

      .author-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .author-detail {
          display: flex;
          flex-direction: column;

          .name {
            font-weight: bold;
            color: $neon-blue;
          }

          .time {
            font-size: 12px;
            color: #8892b0;
          }
        }

        .follow-btn {
          border: 1px solid $neon-blue;
          background: rgba(100, 255, 218, 0.1);
          color: $neon-blue;
          transition: all 0.3s;

          &:hover {
            background: rgba(100, 255, 218, 0.2);
            box-shadow: $glow-blue;
          }
        }
      }

      .video-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 16px;
        padding: 16px;
        background: rgba(10, 25, 47, 0.5);
        border-radius: 8px;
        border: 1px solid rgba(100, 255, 218, 0.2);

        .stat-item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: #8892b0;

          .el-icon {
            font-size: 18px;
            color: $neon-purple;
          }

          span {
            color: #e6f1ff;
          }
        }
      }

      .video-tags {
        margin-bottom: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .tag-item {
          background: rgba(157, 78, 221, 0.1);
          border-color: rgba(157, 78, 221, 0.3);
          color: #c7a6ff;
          box-shadow: $glow-purple;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-2px) rotate(2deg);
            background: rgba(157, 78, 221, 0.2);
          }
        }
      }

      .description {
        color: #ccd6f6;
        line-height: 1.6;
        margin-bottom: 20px;
        padding: 16px;
        background: rgba(10, 25, 47, 0.3);
        border-radius: 8px;
        border-left: 3px solid $neon-blue;
      }

      .music-info {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding: 12px;
        background: rgba(10, 25, 47, 0.5);
        border-radius: 8px;
        border: 1px solid rgba(100, 255, 218, 0.2);

        .el-icon {
          font-size: 20px;
          color: $neon-blue;
        }

        .music-name {
          font-weight: 500;
          color: #e6f1ff;
        }

        .music-author {
          color: #8892b0;
        }
      }

      .location {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #8892b0;
        font-size: 13px;
        margin-bottom: 20px;

        .el-icon {
          font-size: 16px;
          color: $neon-pink;
        }
      }

      .dialog-actions {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(100, 255, 218, 0.2);
        display: flex;
        justify-content: flex-end;
        gap: 16px;

        .el-button {
          min-width: 120px;
          border: 1px solid rgba(100, 255, 218, 0.5);
          background: rgba(10, 25, 47, 0.5);
          color: #e6f1ff;

          &:hover {
            border-color: $neon-blue;
            color: $neon-blue;
            box-shadow: $glow-blue;
          }

          &.el-button--danger {
            border-color: rgba(247, 37, 133, 0.5);

            &:hover {
              border-color: $neon-pink;
              color: $neon-pink;
              box-shadow: $glow-pink;
            }
          }

          .el-icon {
            margin-right: 4px;
          }
        }
      }
    }
  }

  // 自定义滚动条
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(10, 25, 47, 0.5);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(100, 255, 218, 0.3), rgba(157, 78, 221, 0.3));
    border-radius: 4px;
    border: 1px solid rgba(10, 25, 47, 0.8);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(100, 255, 218, 0.5), rgba(157, 78, 221, 0.5));
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
  }

  /* 评论弹窗样式 */
  .comment-loading {
    padding: 10px 0;
  }

  .comment-skeleton-item {
    display: flex;
    margin-bottom: 16px;
  }

  .skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    margin-right: 16px;
  }

  .skeleton-content {
    flex: 1;
  }

  .skeleton-line {
    height: 14px;
    background-color: #f0f0f0;
    margin-bottom: 8px;
    width: 100%;
    border-radius: 4px;
  }

  .skeleton-line-half {
    height: 14px;
    background-color: #f0f0f0;
    width: 50%;
    border-radius: 4px;
  }

  .comment-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
  }

  .comment-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 16px;
  }

  .comment-content {
    flex: 1;
  }

  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .comment-username {
    font-weight: bold;
    font-size: 14px;
  }

  .comment-time {
    font-size: 12px;
    color: #999;
  }

  .comment-text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  .comment-actions {
    display: flex;
    font-size: 12px;
    color: #999;
  }

  .action-item {
    margin-right: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .action-item .icon {
    margin-right: 4px;
    width: 14px;
    height: 14px;
  }

  .action-item .liked {
    color: #f56c6c;
  }

  .no-comments {
    text-align: center;
    padding: 30px 0;
    color: #999;
  }
}

// 动画效果
@keyframes float {
  0% {
    background-position: 0 0, 25px 25px;
  }

  100% {
    background-position: 50px 50px, 75px 75px;
  }
}

@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes glitch {

  0%,
  100% {
    transform: skew(0deg);
  }

  1% {
    transform: skew(2deg);
  }

  2% {
    transform: skew(-2deg);
  }

  3% {
    transform: skew(0deg);
  }
}

// 平台选择器动画
.platform-selector-enter-active,
.platform-selector-leave-active {
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.platform-selector-enter-from,
.platform-selector-leave-to {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}
</style>